<script setup>
import { ref } from 'vue'
import { usePopup } from '@/hooks/usePopup'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const { removePopup } = usePopup()
const key = 'historical-video'

const value2 = ref()
</script>

<template>
  <el-config-provider :locale="zhCn">
    <div class="historical-videos-popup">
      <div class="title-area">
        <div class="title">历史视频</div>
        <div class="title-right" @click="removePopup(key)"></div>
      </div>
      <div class="content-area">
        <div class="date-picker">
          <span>选择时间：</span>
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD"
            time-format="hh:mm:ss"
          />
        </div>
        <div class="video-content">
          <video autoplay controls :src="'demo.mp4'" />
        </div>
      </div>
    </div>
  </el-config-provider>
</template>

<style scoped lang="scss">
.historical-videos-popup {
  width: 820px;
  height: 584px;
  position: absolute;
  z-index: 999;
  left: 550px;
  top: 160px;
  background: url('@/assets/imgs/bg_lssp.png') 100% 100% no-repeat;
  z-index: 999;

  .title-area {
    height: 52px;
    display: flex;
    justify-content: space-between;

    .title {
      margin-left: 33px;
      width: 87px;
      height: 31px;
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      line-height: 52px;
    }

    .title-right {
      width: 16px;
      height: 16px;
      background: url('@/assets/imgs/ic_gb.png') 100% 100% no-repeat;
      margin-top: 24px;
      margin-right: 24px;
      cursor: pointer;
    }
  }

  .content-area {
    padding: 14px 26px;

    .date-picker {
      color: white;

      :deep(.el-date-editor) {
        box-shadow: none;
        background: rgba(0, 29, 49, 0.6);
        border: 1px solid #295893;

        .el-range-input {
          color: white;
        }
      }
    }

    .video-content {
      background: rgba(0, 0, 0, 0.65);
      border: 1px solid #295893;
      margin-top: 20px;
      width: 776px;
      height: 437px;

      video {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
